<template>
  <div id="login" @keydown.enter="userLogin">
    <div class="login_bg" :style="{'background-image':`url(${this.back})`}"></div>
    <div class="bg_cover"></div>
    <div  class="login_body">
      <h3>众众图书商城</h3>
      <el-form ref="form" :model="userObj" label-width="80px">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名"  v-model="userObj.username"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input placeholder="请输入密码" show-password v-model="userObj.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="userLogin">登录</el-button>
          <el-button @click="userRegister">没有账号? 前往注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {userLogin} from "../network/home";

export default {
  name: "login",
  component:{
  },
  data(){
    return{
      userObj:{
        username: '',
        password: '',
      },
      bgList:[],
      back:"",
    }
  },
  methods:{
    userLogin(){
      userLogin(this.userObj).then((result)=>{
        console.log(result);

        if (result.data.code!==200){
          this.$message({
            message: '登录失败！请检查账号或者密码',
            type: 'warning'
          });
        }else{
          localStorage.setItem("JinBookProFront",result.data.data.id);
          localStorage.setItem("jin_book_pro_user_img",result.data.data.userPortrait);
          this.$message({
            message: '登录成功！',
            type: 'success'
          });
          this.$router.push("/");
        }
      }).catch((reason)=>{
        console.log(reason);
      })

    },
    userRegister(){//前往注册
      this.$router.push('/register');
    }
  },
  created() {
    this.bgList=[
      'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg1.jpg',
      'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg2.jpg',
      'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg3.jpg',
      'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg4.jpg',
      'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/sixth-qianfeng/front/bg5.jpg',
      `https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg`,
    ]
  },
  mounted() {
    this.back=this.bgList[Math.round(Math.random() * this.bgList.length)];//随机背景
  }
}
</script>

<style scoped>
#login{
  position: relative;
  width: 100%;
  height: 100vh;
}
.login_bg{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100vh;

  background-size: 100% 100%;
  filter: blur(7px);
}
.bg_cover{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.5);
  /*background: rgba(255,255,255,.2);*/
}

/*登录的身体*/
.login_body{
  position: relative;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translateY(-70%) translateX(-55%);
  width: 500px;
  height: 300px;
  padding: 20px 30px;
}

.login_body h3{
  text-align: center;
  line-height: 80px;
  font-size: 36px;
  font-family: '苏新诗柳楷简';
  color: white;
}

</style>
